<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-15 10:51:43
 * @LastEditTime : 2023-12-14 18:45:28
-->
<script lang="ts" setup name="ManageLog">
import { useFields } from './fields'
import LogDetail from './logDetail.vue'
import { logApi } from '@/MainApp/apis/log'

const { operationFieldList, loginFields, systemFieldList } = useFields()
// 组件返回的查询参数，包含分页和查询字段
const pageData = reactive({
  login: undefined,
  operate: undefined,
  system: undefined
})
const logData = reactive({
  login: [],
  operate: [],
  system: []
})
const countTotal = ref(0)
const loading = ref(false)
const activeLog = ref('login')
const queryLogs = async () => {
  await nextTick()
  const ACTIVE = activeLog.value
  loading.value = true
  const log = { ...(pageData as any)[ACTIVE] }
  const { success, data, total }
    = ACTIVE === 'login'
      ? await logApi.getPageLogs(log)
      : ACTIVE === 'operate'
        ? await logApi.getOperateLogs(log)
        : await logApi.getSystemLogs(log)

  ;(logData as any)[ACTIVE] = success ? data : []
  countTotal.value = Number(total)
  loading.value = false
}

const showDetail = ref(false)
const detailId = ref('')
const handleDetail = (row: any) => {
  detailId.value = row.id
  showDetail.value = true
}
const tabs = [
  { id: 'login', label: '登录日志' },
  { id: 'operate', label: '操作日志' },
  { id: 'system', label: '系统日志' }
]
</script>

<template>
  <IkPageMain fixed>
    <IkPageTabs
      v-model="activeLog"
      lazy-tab
      :tabs="tabs"
      @tab-click="queryLogs"
    >
      <template #login>
        <IkPageFull
          v-model="pageData.login"
          tab-id="login"
          :fields="loginFields"
          :table-data="logData.login"
          :total="countTotal"
          :loading="loading"
          :search="queryLogs"
        >
          <template #success="{ data }">
            <IkStatu
              :type="data.row.success ? 'success' : 'warning'"
              :title="data.row.success ? '成功' : '失败'"
            />
          </template>
        </IkPageFull>
      </template>
      <template #operate>
        <IkPageFull
          v-model="pageData.operate"
          :immediate="false"
          tab-id="operate"
          :fields="operationFieldList"
          :table-data="logData.operate"
          :total="countTotal"
          :loading="loading"
          :search="queryLogs"
        >
          <template #success="{ data }">
            <IkStatu
              :type="data.row.success ? 'success' : 'warning'"
              :title="data.row.success ? '成功' : '失败'"
            />
          </template>
        </IkPageFull>
      </template>
      <template #system>
        <IkPageFull
          v-model="pageData.system"
          :immediate="false"
          tab-id="system"
          :fields="systemFieldList"
          :table-data="logData.system"
          :total="countTotal"
          :loading="loading"
          :search="queryLogs"
        >
          <template #operate="{ data }">
            <IkSvgIcon
              v-role="'DETAIL-LOG'"
              show-bg
              pop
              in-table
              title="详情"
              :start-margin="false"
              size="small"
              name="icon-ziyuanliebiao"
              @click="handleDetail(data.row)"
            />
          </template>
        </IkPageFull>
      </template>
    </IkPageTabs>
    <LogDetail v-model="showDetail" :detail-id="detailId" />
  </IkPageMain>
</template>
